<template>
  <el-dialog title="绑定微信账号"
             width="500px"
             v-model="isShow"
             :append-to-body="true"
             :close-on-click-modal="false"
             @opened="handleOpened"
             @closed="handleClosed">
    <div class="safe-tip" v-if="proactivePop">
      为了你的账号安全，请绑定微信
    </div>
    <scan-qrcode
        :loading="loadingQrcode"
        :qrcode-content="qrcode"
        :status-cover="statusMessage"
        scan-tips="使用微信扫码绑定"
        @click="refreshQRCode"
    ></scan-qrcode>

    <template #footer>
      <div class="footer" :class="{'footer_end': !proactivePop}">
        <el-checkbox v-model="doNotShowAgain" label="不再提示" v-if="proactivePop"></el-checkbox>
        <el-button type="primary" @click="isShow = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {Ref} from 'vue';
import {doNotNoticeBindWechat, getBindQRCodeStatus, getQrcode, update} from "@/api/orgStaff";

const props = defineProps<{
  show: boolean,
  rowData: any,
  proactivePop?:boolean, // 主动弹出
}>()
const emits = defineEmits(["update:show", "bind-finished"])

const store = useStore()

const loadingQrcode: Ref<boolean> = ref(true)
const qrcode: Ref<string> = ref('')
const tag: Ref<string> = ref('')
const statusMessage: Ref<string> = ref('')
const isShow = computed({
  get() {
    return props.show
  },
  set(newVal) {
    emits("update:show", newVal)
  }
})
const doNotShowAgain = ref(false)

const _getQRCode = async () => {
  loadingQrcode.value = true
  const rs = await getQrcode({
    userId: props.rowData.id,
    app: 'merchant'
  })
  loadingQrcode.value = false

  if (rs.code === 200) {
    qrcode.value = rs.payload?.qrCode ?? ''
    tag.value = rs.payload?.tag ?? ''

  } else {
    showStatusCover('点击刷新')
  }
}

let checkStatusTimer: ReturnType<typeof setInterval>
const checkQrcodeStatus = () => {
  clearInterval(checkStatusTimer)
  checkStatusTimer = setInterval(() => {
    _getQrcodeStatus()
  }, 1500)
}

const qrcodeStatus = ref<'wait' | 'scanned' | 'finished'>('wait')
const _getQrcodeStatus = async () => {
  const rs = await getBindQRCodeStatus({
    qrCode: qrcode.value,
    tag: tag.value,
  })

  if (rs.code === 200) {
    qrcodeStatus.value = rs.payload?.status ?? 'scanned'

    if (qrcodeStatus.value === 'scanned') {
      showStatusCover('已扫码')
    } else if (qrcodeStatus.value === 'finished') {
      handleFinished()
    } else {

    }
  } else {
    clearInterval(checkStatusTimer)
    showStatusCover('登录二维码已过期，点击刷新')
  }
}

const handleFinished = () => {
  emits('bind-finished')
}

const showStatusCover = (message = '') => {
  statusMessage.value = message
}
const hideStatusCover = () => {
  statusMessage.value = ''
}

const refreshQRCode = () => {
  hideStatusCover()
  _getQRCode()
  checkQrcodeStatus()
}

const handleOpened = () => {
  _getQRCode()
  checkQrcodeStatus()
}

const handleClosed = async () => {
  clearInterval(checkStatusTimer)

  if (doNotShowAgain.value) {
    // 不再提示
    doNotNoticeBindWechat({
      id: store.state.user.userId,
      bindWxPromptStatus: 1,
    })
  }
}
</script>

<style scoped lang="scss">
.safe-tip {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: var(--el-color-primary);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_end {
  justify-content: flex-end;
}
</style>
